<template>
	<view class="pageBox">
		<view class="title">请选择请假类型</view>
		<view class="list" v-for="(item,index) in typeList" :key="index" @click="toInfo(item)">
			<view class="list-left">
				<view class="dian" :style="randColor()"></view>
				<view class="list-name">
					{{item.type_name}}
				</view>
			</view>
			<view class="list-center">
				按天请假
			</view>
			<uni-icons type="forward" size="24" color="#787878"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: []
			};
		},
		onLoad() {
			//获取申请类型
			this.$api.getApplyType({}, true, (res) => {
				this.typeList = res.type
			})
		},
		methods: {
			toInfo({
				id,
				type,
				type_name
			}) {
				switch (type_name) {
					case "补卡":
						uni.navigateTo({
							url: "../submit/supplement?id=" + type + "&name=" + type_name
						})
						break;
					case "事假":
					case "病假":
					case "补休":
					case "疗养假":
					case "培训学习":
					case "年休假":
					case "婚假":
					case "探亲假":
					case "丧假":
					case "产假":
					case "哺育假":
					case "护理假":
					case "例假":
					case "计划生育假":
					case "销假":
					case "轮休":
					case "钻井队领导节日休息":
						uni.navigateTo({
							url: "../submit/index?id=" + type + "&name=" + type_name
						});
						break;

					case "公差":
						uni.navigateTo({
							url: "../submit/evection?id=" + type
						})
						break;

				}

			},
			randColor() {
				let r, g, b;
				r = Math.floor(Math.random() * 255);
				g = Math.floor(Math.random() * 255);
				b = Math.floor(Math.random() * 255);
				return `background:rgb(${r},${g},${b})`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F6;

		.title {
			color: #787878;
			font-size: 34upx;
			padding: 16upx 32upx;
		}

		.list {
			width: 100%;
			padding: 14upx 20upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin-bottom: 40upx;

			&-left {
				width: 30%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #444444;
				border-right: 1px solid #E7E8E8;
				text-align: right;

				.dian {
					width: 16upx;
					height: 16upx;
					border-radius: 50%;

				}
			}

			&-center {
				width: 60%;
				color: #444444;
				font-size: 24upx;
			}

		}
	}
</style>
